<!-- @format -->

<script setup>
	import BitPanel from './components/bit-panel.vue'
</script>

<template>
	<h3>折叠面板</h3>
	<!-- 第一次使用：两处插槽都没有传值，就会展示插槽的默认值 -->
	<bit-panel />
	<!-- 第二次使用：展示登鹳雀楼这首诗及内容 -->
	<bit-panel>
		<template #title>
			<span>登鹳雀楼</span>
		</template>
		<template #body>
			<p>白日依山尽，</p>
			<p>黄河入海流。</p>
			<p>欲穷千里目，</p>
			<p>更上一层楼。</p>
		</template>
	</bit-panel>
	<!-- 第三次使用：展示两个女明星+两张图片 -->
	<bit-panel>
		<template #body>
			<div class="img-box">
				<img src="./assets/lq.png" />
				<img src="./assets/sy.png" />
			</div>
		</template>
		<template #title>
			<b>两个女明星</b>
		</template>
	</bit-panel>
</template>

<style lang="scss">
	* {
		margin: 0;
		padding: 0;
	}
	body {
		background: #ccc;
	}
	#app {
		width: 400px;
		margin: 30px auto;
		padding: 1em 2em 2em;
		background: #fff;
	}
	#app h3 {
		margin-bottom: 20px;
		text-align: center;
	}

	.img-box {
		display: flex;
		flex-direction: column;
		img {
			width: 100%;
		}
	}
	p {
		line-height: 30px;
	}
</style>
